// Styles for overview and guide docs generated via `marked` from the material2 repo.

@import 'util.sass'

.docs-markdown
  padding: 0 30px 30px 30px

.docs-markdown-h1
  display: inline-block
  font-size: 34px
  font-weight: 400

.docs-markdown-h2
  font-size: 24px

.docs-markdown-h3
  font-size: 20px

.docs-markdown-h2,
.docs-markdown-h4
  margin-top: 40px

.docs-markdown-h5
  font-size: 18px

.docs-markdown-p,
.docs-markdown-ul,
.docs-markdown-ol
  font-size: 16px
  line-height: 28px

.docs-markdown-a
  text-decoration: none
  color: $brand-primary !important

  &:hover
    text-decoration: underline

.docs-markdown-td code
  font-size: 14px

.docs-markdown-pre
  display: block
  line-height: 22px
  margin: 16px auto
  padding: 16px 20px
  background: $bg-main
  border: .5px solid $border-mute
  border-radius: 5px
  overflow-x: auto

  .docs-markdown-code
    padding: 0

.docs-markdown-code
  padding: 3px

code, pre
  font-family: Consolas, Monaco, monospace

pre
  font-size: 14px

.docs-header-link
  a
    text-decoration: none
    // deduct -30px so the anchor icon will be positioned outside the content
    margin-left: -30px
    display: inline-block
    vertical-align: middle

  .material-icons
    visibility: hidden

  &:hover .material-icons
    visibility: visible

.docs-markdown-p
  .docs-markdown-code
    background: rgba(0,0,0,.03)

.docs-markdown-ul
  padding-left: 40px

  .docs-markdown-li
    display: list-item !important
    text-align: -webkit-match-parent
    list-style-type: circle
